<template>
  <div>
    <div class="card-group mb-3">
      <div v-for="(item, key) in tasks" class="card card-hover" :key="key">
        <div class="card-body">
          <span class="task-title" :class="item.isCurrentTask ? 'font-weight-bold' : ''">
            {{ item.title }}
          </span>
          <div class="text-muted mb-2">
            <div v-for="(subItem, subIndex) in item.subTitle" :key="subIndex">
              <span>{{ subItem.prefix }}</span>
              <span :class="subItem.css">{{ subItem.num }}</span>
            </div>
          </div>
          <div v-for="(list, serial) in item.list" class="mb-2" :key="serial">
            <router-link :to="list.url" class="task-link">
              <div class="d-flex justify-content-between">
                <small>
                  <span class="mr-3">{{ list.title }}</span>
                  <span>{{ list.num }}</span>
                </small>
                <small>{{ list.funds }} 万元</small>
              </div>
              <div class="progress-bar">
                <div
                  class="progress-bar-full"
                  :class="`bg-${list.bgColor}`"
                  :style="{ width: `${list.percent}%` }"
                ></div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <h5 class="text-muted">{{ taskName }}</h5>

    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getNumAndPercent } from '@/credit/views/city/self/Index'

export default {
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['taskCountHnd']),
    taskName() {
      const routes = this.$route.matched.slice(-2)
      return routes.map(item => item.meta.title).join('：')
    },
    tasks() {
      // 推荐
      const recommendTotal = getNumAndPercent(
        this.getValue('normal_total'),
        this.getValue('ex_approval_total')
      )
      const recommendFunds = getNumAndPercent(
        this.getValue('normal_funds'),
        this.getValue('ex_approval_funds')
      )

      // 审查
      const prelimTotal = getNumAndPercent(
        this.getValue('no_approval_total'),
        this.getValue('yes_approval_total'),
        this.getValue('update_apply_total')
      )
      const prelimFunds = getNumAndPercent(
        this.getValue('no_approval_funds'),
        this.getValue('yes_approval_funds'),
        this.getValue('update_apply_funds')
      )

      // 贷后
      const postloanTotal = getNumAndPercent(
        this.getValue('on_gua_total'),
        this.getValue('expire_gua_total'),
        this.getValue('un_gua_total'),
        this.getValue('ex_gua_total')
      )
      const postloanFunds = getNumAndPercent(
        this.getValue('on_gua_funds'),
        this.getValue('expire_gua_funds'),
        this.getValue('un_gua_funds'),
        this.getValue('ex_gua_funds')
      )

      return [
        {
          title: '项目推荐',
          subTitle: [
            {
              prefix: '已添加项目：',
              num: recommendTotal.sum,
              css: '',
            },
          ],
          namePrefix: 'hndRecommend',
          list: [
            {
              title: '已推荐项目',
              num: recommendTotal.data[0].count,
              percent: recommendTotal.data[0].percent,
              funds: recommendFunds.data[0].count,
              bgColor: 'success',
              url: { name: 'hndRecommend' },
            },
            {
              title: '待确定项目',
              num: recommendTotal.data[1].count,
              percent: recommendTotal.data[1].percent,
              funds: recommendFunds.data[1].count,
              bgColor: 'info',
              url: { name: 'recommendNo' },
            },
          ],
        },
        {
          title: '项目审查',
          subTitle: [
            {
              prefix: '已推荐项目：',
              num: recommendTotal.data[0].count,
              css: '',
            },
          ],
          namePrefix: 'hndPrelim',
          list: [
            {
              title: '未审项目',
              num: prelimTotal.data[0].count,
              percent: prelimTotal.data[0].percent,
              funds: prelimFunds.data[0].count,
              bgColor: 'warning',
              url: { name: 'hndPrelim' },
            },
            {
              title: '已审项目',
              num: prelimTotal.data[1].count,
              percent: prelimTotal.data[1].percent,
              funds: prelimFunds.data[1].count,
              bgColor: 'success',
              url: { name: 'hndPrelimPass' },
            },
            {
              title: '异常项目',
              num: prelimTotal.data[2].count,
              percent: prelimTotal.data[2].percent,
              funds: prelimFunds.data[2].count,
              bgColor: 'danger',
              url: { name: 'hndPrelimAbnormal' },
            },
          ],
        },
        {
          title: '签约放款',
          subTitle: [
            {
              prefix: '已通过项目：',
              num: prelimTotal.data[1].count,
              css: '',
            },
          ],
          namePrefix: 'hndRegister',
          list: [
            {
              title: '已放款',
              num: prelimTotal.data[1].count,
              percent: prelimTotal.data[1].percent,
              funds: prelimFunds.data[1].count,
              bgColor: 'success',
              url: { name: 'hndRegisterPass' },
            },
          ],
        },
        {
          title: '贷后管理',
          subTitle: [
            {
              prefix: '已放款项目：',
              num: postloanTotal.data[0].count,
              css: '',
            },
          ],
          namePrefix: 'hndPostloan',
          list: [
            {
              title: '在保项目',
              num: postloanTotal.data[0].count,
              percent: postloanTotal.data[0].percent,
              funds: postloanFunds.data[0].count,
              bgColor: 'info',
              url: { name: 'hndPostloaning' },
            },
            {
              title: '即将到期',
              num: postloanTotal.data[1].count,
              percent: postloanTotal.data[1].percent,
              funds: postloanFunds.data[1].count,
              bgColor: 'warning',
              url: { name: 'hndPostloanExpire' },
            },
            {
              title: '解保项目',
              num: postloanTotal.data[2].count,
              percent: postloanTotal.data[2].percent,
              funds: postloanFunds.data[2].count,
              bgColor: 'success',
              url: { name: 'hndPostloanFinish' },
            },
            {
              title: '异常项目',
              num: postloanTotal.data[3].count,
              percent: postloanTotal.data[3].percent,
              funds: postloanFunds.data[3].count,
              bgColor: 'danger',
              url: { name: 'hndPostloanAbnormal' },
            },
          ],
        },
      ]
    },
  },
  watch: {},
  created() {
    this.$store.dispatch('getTaskCountHnd')
  },
  mounted() {},
  methods: {
    getValue(key) {
      const data = (this.taskCountHnd && this.taskCountHnd[0]) || {}
      return data[key]
    },
  },
}
</script>
<style scoped lang="scss">
.task-title {
  color: #333;
  font-size: 1.25rem;

  &.active {
    font-weight: bold;
    color: $primary;
    color: var(--primary);
  }
}

.card-hover {
  transition: all 0.3s;

  &:hover {
    border-color: lighten($primary, 35%);
    border-color: var(--primary-light-9);
    box-shadow: 0 2px 6px $gray-400;
  }
}

.bg-ondine {
  background-color: #40e0d0;
}

.task-link {
  color: $gray-600;
  &.exact-active {
    color: $primary;
    color: var(--primary);
  }
}
</style>
